<template>
    <div class="wrapper" >
        <div class="login-div" :style="loginDiv">
            <div class="login-top">
                <image style="width:750px; height:294px;" src="bmlocal://assets/login.png"></image>
            </div>
            <div v-if="chooseCompany" class="inputOuter">
                <div class="inputDiv">
                    <image class="inputImg" src="bmlocal://assets/phone.png"></image>
                    <input class="input" placeholder="输入手机号" style="tint-color: #f49428;"
                    type="number" maxlength='11' v-model="phone"></input>
                    <wxc-button :text="sendText" size="small" :btnStyle = "sendBtn"
                        @wxcButtonClicked="sendCode"></wxc-button>
                </div>
                <div class="inputDiv">
                    <image class="inputImg" src="bmlocal://assets/code.png"></image>
                    <input class="input" maxlength='4' placeholder="短信验证码" v-model="code" type="number" style="tint-color: #f49428;"></input>
                </div>
                <wxc-button text="登录" size="full" :btnStyle = "loginBtn" :disabled="phone.length!==11 || code.length !==4"
                        @wxcButtonClicked="confirmLogin"></wxc-button>
            </div>
            <div v-if="!chooseCompany" class="inputOuter">
                <div class="inputDiv">
                    <image class="inputImg" src="bmlocal://assets/client.png"></image>
                    <input class="input" placeholder="公司名称" v-model="company" type="text" style="tint-color: #f49428;"></input>
                </div>
                <wxc-button text="下一步" size="full" :btnStyle = "loginBtn" :disabled="!company"
                        @wxcButtonClicked="confirmCompany"></wxc-button>
            </div>
        </div>
        
       
    </div>
</template>
<script>
var amap = weex.requireModule('amap')
var axios = weex.requireModule('bmAxios')
var storage = weex.requireModule('bmStorage')
import util from './utils/util';
import { Utils,WxcButton} from 'weex-ui';
export default {
    
    components: {
        Utils,
        WxcButton
    },
    
    data() {
        return {
            chooseCompany:false,
            pos:[116.487, 40.00003],
            loginDiv:{},
            sendBtn:{
                backgroundColor:'#999999',
            },
            loginBtn:{
                backgroundColor:'#f49428',
                marginTop:100,
            },
            sendText:'发送验证码',
            loginDisabled:false,
            totalTime: 60,
            sendFlag:false,
            phone:'',
            code:'',
            company:'',

        }
    },
    watch:{
        phone(){
            if(this.phone.length == 11 && this.totalTime == 60){
                this.sendFlag = true
                this.sendBtn.backgroundColor = '#f49428'
            }else{
                this.sendFlag = false
                this.sendBtn.backgroundColor = '#999999'
            }
        }
    },
    methods: {
        sendCode(){
            if(!this.sendFlag){
                return
            }
            let filter = {}
            filter.phone = this.phone
            filter.isApp = true
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                method: 'POST',    
                name: 'sendCode',
                data: filter
            }).then(res => {
                if(res.success){
                    this.$notice.toast({
                        message: '发送成功'
                    })
                }else{
                    this.$notice.toast({
                        message: res.data
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.setTime()
        },
        setTime(){
            if (this.totalTime == 0) {
                this.sendText="发送验证码";
                this.sendBtn.backgroundColor = '#f49428'
                this.totalTime = 60
                this.sendFlag = true
            } else {
                this.sendFlag = false
                this.sendBtn.backgroundColor = '#999999'
                this.sendText="重新发送(" + this.totalTime + "s)";
                this.totalTime -- 
                setTimeout(() => {
                    this.setTime()
                }, 1000)
            }
        },
        confirmLogin(){
            this.$notice.loading.show()
            let filter = {}
            filter.phone = this.phone
            filter.code = this.code
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                method: 'POST',    
                name: 'login',
                data: filter
            }).then(res => {
                if(res.success){
                    this.$storage.set('token',res.data)
                    this.$router.setHomePage('tabBar')
                }else{
                    this.$notice.toast({
                        message: res.data
                    })
                }
                this.$notice.loading.hide()
            }, error => {
                this.$notice.loading.hide()
                this.$notice.toast({
                    message: '网络错误'
                })
            })
        },
        confirmCompany(){
            let data = {}
            let _this = this
            data.name = this.company
            data.isApp = 1
            axios.fetch({
                method: 'GET',
                // url: 'https://zn.hyjtyl.com/uc/api/getUserPre',
                url: 'http://test.hyjtyl.com/uc/api/getUserPre',
                header: {},
                data: data,
                timeout: 3000
            }, function(resData){
                if(resData.data.success){
                    _this.$storage.set('pre',resData.data.data)
                    _this.$storage.set('chooseCompany',true)
                    _this.$router.refresh()
                }else{
                    _this.$notice.toast({
                        message: resData.data.msg
                    })
                }                        
            })
        },
        getLocation(){
            let _this = this
            amap.getUserLocation("map2017",function (resData) {
                if(resData.result == 'success'){
                    _this.pos = resData.data.position;
                }else{
                    _this.$notice.toast({
                        message: '定位失败'
                    })
                }
            });  
        },
        getAddress(locationLng,locationLat){
            // 示例
            let data = {}
            let _this = this
            let loc = locationLng+','+locationLat
            data.location = loc
            data.key = 'c1f73016285c30b57fda31598f5757c2'
            axios.fetch({
                method: 'GET',
                url: 'https://restapi.amap.com/v3/geocode/regeo',
                header: {},
                data: data,
                timeout: 3000
            }, function(resData){
                if(resData.data.status == "1"){
                    _this.$storage.set('address',resData.data.regeocode.formatted_address)
                }else{
                    _this.$notice.toast({
                        message: '定位失败'
                    })
                }                        
                
            })
        }
    },
    created() {
        util.initIconFont()
        this.loginDiv.height = Utils.env.getPageHeight()+500
        // this.chooseCompany = this.$storage.getSync('chooseCompany')
        this.$storage.get('chooseCompany').then(resData => {
            this.chooseCompany = resData
        })
        // var isAndroid = Utils.env.isAndroid()
        // if(isAndroid){
        //     amap.initAmap('e6a87676260d70740d8303b686dfd056')
        //     var id = 'test'
        //     let _this = this
        //     amap.getUserLocation("test",function (resData) {
        //         if(resData.result == 'success'){
        //         _this.$storage.set('address',resData.data.position[2])
        //         }else{
        //             _this.$notice.toast({
        //                 message: '定位失败'
        //             })
        //         }
        //     });  
        // }else{
        //     this.$geo.get().then(data => {
        //         //获取行政位置
        //         var locationLng = data.locationLng
        //         var locationLat = data.locationLat
        //         this.getAddress(locationLng,locationLat)
        //     }, error => {
        //         this.$notice.toast({
        //             message: '定位失败'
        //         })
        //     })
        // }
        
        // this.$storage.set('pre','/test')
        // let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRldGltZSI6MTU1MDQ3NzA4NTA4NywiaWQiOjIyLCJ1c2VybmFtZSI6IuS-jeaZk-aYjiJ9.1XE3lGNp4-RivMBfo9cgNMG10JvRY_krIC93dT7T-4M'
        // this.$storage.set('token',token)
        // this.$router.setHomePage('tabBar')
        // this.$router.setHomePage('/pages/login.js')
    },
}
</script>

<style scoped>
.login-div{
    background-color:#f6f5f6;
}
.login-top{
  margin-top: 250px;
  margin-bottom: 30px;
  text-align:center;
  /* height:500px; */
}
.inputOuter{
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
.inputDiv{
    flex-direction: row;
    /* justify-content:center; */
    /* align-items: center; */
    border-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e2e2e2;
    width: 650x;
    margin-bottom: 50px;
}
.inputImg{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.input{
    width: 400px;
    margin-bottom: 20px;
    height: 50px;
}
.map{
    width: 750px;
    height: 750px;
}
</style>